<template>
	<view>
		<swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="18000"
			@change="cardSwiper">
			<swiper-item v-for="(item,index) in bannerList" :key="index" :class="cardCur==index?'cur':''"
				@click="bannerItemClickManager(item)">
					<view class="swiper-item image-banner">
						<block v-if="item.type == 'ad' || item.type == 99">
							<mainAd :transferType="'banner'" />
						</block>
						<block v-else>
							<image :src="item.image" mode="aspectFill" v-if="item.type=='1'"></image>	
						</block>
					</view>
					<view v-if="item.type != 'ad' &&  item.type != 99" class="swiper-item2 image-banner">
						<image class="png-sussuspension" :src="item.backgroundImage" mode="heightFix"
							v-if="item.type=='1'"></image>
					</view>
					<view v-if="item.type != 'ad'&&  item.type != 99" class="swiper-item-text">
						<view class="text-sussuspension">
							<view class="tn-text-bold tn-color-black" style="font-size: 45rpx;">{{item.title}}</view>
							<view class="tn-color-black tn-padding-top-xs" style="font-size: 35rpx;">{{item.subTitle}}
							</view>
						</view>
					</view>
			</swiper-item>
		</swiper>
		<view class="indication">
			<block v-for="(item,index) in bannerList" :key="index">
				<view class="spot" :class="cardCur==index?'active':'tn-bg-black'"
					:style="'background-color: '+ item.color +''"></view>
			</block>
		</view>
	</view>
</template>

<script>
	import Dialog from '@/wxcomponents/vant/dialog/dialog'
	import mainAd from '@/components/Ad/mainAd.vue'
	import {
		imageSetting
	} from '@/common/utils.js'
	import {
		BannerBannerList
	} from '@/api/home.js'
	import {
		ad_banner
	} from '@/common/config.js'

	export default {
		components: {
mainAd
		},
		data() {
			return {
				bannerList: [],
				cardCur: 0,

			}
		},
		props: {

		},

		onLoad() {
			console.log('页面加载')

		},
		onShow() {
			console.log('页面显示')
		},
		onReady() {
			console.log('页面初次显示')
			// 1. 获取banner
			this.interfaceBannerBannerList();

		},
		onHide() {
			console.log('页面隐藏')
		},
		onUnload() {
			console.log('页面卸载')
		},
		onBackPress() {
			console.log('页面返回...')
		},
		onShareAppMessage() {
			console.log('分享!')
		},
		onReachBottom() {
			console.log('下拉加载...')
		},
		onPageScroll() {
			console.log('页面滚动...')
		},
		onPullDownRefresh() {

		},


		methods: {
			
			interfaceBannerBannerList() {
				var that = this;
				var params = {
					show: true,
				}
				BannerBannerList(params).then(res => {					
					that.bannerList = res
				});
			},

			cardSwiper(e) {
				this.cardCur = e.detail.current
			},

			// banner    点击
			bannerItemClickManager(item) {
				debugger
				var url1 = item.url + "?" + item.path;
				if (item.type == 1){
					uni.navigateTo({
						url:url1,
					})
				}
				
				this.$emit('actionEventManager', 'direct', item);
			},

		}
	}
</script>

<style lang='scss' scoped>
	
	/* 旋转 */
	.png-sussuspension1 {
		animation: suspension1 12s ease-in-out infinite;
	}

	@keyframes suspension1 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.tabs-fixed {
		position: fixed;
		top: 0;
		width: 100%;
		transition: all 0.25s ease-out;
		z-index: 1;
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 360rpx !important;
		margin-top: -30rpx;
	}

	.card-swiper swiper-item {
		/* width: 750rpx !important; */
		left: 0rpx;
		box-sizing: border-box;
		padding: 30rpx 30rpx 30rpx 30rpx;
		overflow: initial;
		// border: 1rpx solid blueviolet;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		border-radius: 0rpx;
		transform: scale(0.85);
		transition: all 0.2s ease-in 0s;
		will-change: transform;
		overflow: hidden;
		border-radius: 10rpx;
		// border: 1rpx solid blue;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item2 {
		margin-top: -370rpx;
		width: 620rpx;
		display: block;
		height: 515rpx;
		border-radius: 0rpx;
		transform: translate(240rpx, 0rpx) scale(0.45, 0.45);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
		// border: 1rpx solid black;
	}

	.card-swiper swiper-item.cur .swiper-item2 {
		margin-top: -385rpx;
		width: 620rpx;
		transform: translate(210rpx, 0rpx) scale(0.62, 0.62);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.card-swiper swiper-item .swiper-item-text {
		margin-top: -300rpx;
		width: 100%;
		display: block;
		height: 50%;
		border-radius: 10rpx;
		transform: translate(0rpx, -40rpx) scale(0.7, 0.7);
		transition: all 0.6s ease 0s;
		will-change: transform;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item-text {
		margin-top: -350rpx;
		width: 100%;
		transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
		transition: all 0.6s ease 0s;
		will-change: transform;
	}

	.image-banner {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 0;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		// border: 1rpx solid orangered;
	}

	.spot {
		// background-color: #FBBD12;
		top: -80rpx;
		opacity: 0.1;
		width: 30rpx;
		height: 8rpx;
		border-radius: 2rpx;
		margin: 0 6rpx !important;
		left: -238rpx;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		// background-color: #FBBD12;
	}



	/* 资讯主图 start*/
	.image-article {
		border-radius: 8rpx;
		width: 200rpx;
		height: 200rpx;
		position: relative;
	}

	.image-pic {
		border: 1rpx solid #F8F7F8;
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	.article-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	/* 文字截取*/
	.clamp-text-1 {
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.clamp-text-2 {
		-webkit-line-clamp: 2;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 35rpx;
			color: #1D2541;
			background-color: #F3F2F7;
			border-radius: 10rpx;
			font-size: 22rpx;
			padding: 5rpx 15rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}


	/* 大单图 start*/
	.tn-blogger-content2 {
		&__wrap {
			padding: 30rpx;
		}

		&__info {
			&__btn {
				margin-right: -12rpx;
				opacity: 0.5;
			}
		}

		&__label {
			&__item {
				line-height: 45rpx;
				padding: 0 20rpx;
				margin: 5rpx 18rpx 0 0;

				&--prefix {
					color: #00FFC8;
					padding-right: 10rpx;
				}
			}

			&__desc {
				line-height: 55rpx;
			}
		}

		&__main-image {
			box-shadow: 0rpx 5rpx 40rpx 0rpx rgba(43, 158, 246, 0.2);
			border-radius: 16rpx;

			&--1 {
				max-width: 690rpx;
				min-width: 690rpx;
				max-height: 400rpx;
				min-height: 400rpx;
			}

			&--2 {
				max-width: 260rpx;
				max-height: 260rpx;
			}

			&--3 {
				height: 212rpx;
				width: 100%;
			}
		}

		&__count-icon {
			font-size: 40rpx;
			padding-right: 5rpx;
		}
	}

	.image-design {
		padding: 160rpx 0rpx;
		font-size: 40rpx;
		font-weight: 300;
		position: relative;
	}

	.image-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border-radius: 10rpx;
	}

	/* 文章内容 end*/
</style>